<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_Vue的watch侦听选项</title>
  <!-- 
  在 Vue 3 中， `watch`  侦听器提供了一些选项，用于控制其行为和特性。这些选项可以帮助开发者更灵活地处理数据变化。
  1. 基本选项
   1.1  `immediate` 
  - 说明：如果设置为  `true` ，在侦听器创建时立即执行回调函数，而不仅仅是在被观察的数据发生变化时。
  - 用法：常用于需要在初始化时执行某些逻辑的场景。
  watch(count, (newValue) => {
    console.log(`当前计数: ${newValue}`);
  }, { immediate: true });
  在这个例子中， `watch`  会在创建时立即输出当前的  `count`  值。

   1.2  `deep` 
  - 说明：如果设置为  `true` ，则会深度观察对象或数组的内部变化，而不仅仅是引用变化。
  - 用法：适用于需要观察复杂对象或数组的场景。
  const user = ref({ name: '张', age: 25 });

  watch(user, (newValue) => {
    console.log(`用户信息变化:`, newValue);
  }, { deep: true });
  在这个例子中，任何  `user`  对象内部属性的变化都会触发侦听器。

  2. 其他选项
   2.1  `flush` 
  - 说明：控制侦听器的执行时机。可以设置为  `'pre'` 、 `'post'`  或  `false` 。
    -  `'pre'` ：在 DOM 更新之前执行（默认值）。
    -  `'post'` ：在 DOM 更新之后执行。
    -  `false` ：在下一个事件循环中执行。
    watch(count, (newValue) => {
      console.log(`当前计数: ${newValue}`);
    }, { flush: 'post' });
  在这个例子中，侦听器会在 DOM 更新之后执行。

  3. 总结
  -  `immediate` ：设置为  `true`  时，在侦听器创建时立即执行回调。
  -  `deep` ：设置为  `true`  时，深度观察对象或数组的内部变化。
  -  `flush` ：控制侦听器的执行时机，可以设置为  `'pre'` 、 `'post'`  或  `false` 。
  -->
</head>
<body>
  
  <div id="app">
    <h3>{{ message }} - {{ user }}</h3>

    <button @click="changeMessage">changeMessage</button>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, ref, watch } = Vue;

    createApp({
      setup() {
        const message = ref('Hello watch');
        const user = ref({ name: '张', age: 25 });

        watch([user, message], (newValue, oldValue) => {
          console.log(`用户信息变化:`, newValue, oldValue);
        }, {
          immediate: true, // 侦听器创建时立即执行回调
          deep: true,  // 深度观察对象或数组的内部变化
        });
        
        const changeMessage = () => {
          message.value = 'Hello watch 2';
          user.value.name = 'watch-name';
        }

        return {
          user,
          message,
          changeMessage
        };
      }
    }).mount('#app');

  </script>

</body>
</html>